import * as THREE from 'three'
import createApp from '../../core'

function createSpotLightHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)

  const axesHelper = new THREE.AxesHelper(100)
  scene.add(axesHelper)

  const { color, intensity, distance, angle, penumbra, decay, color1 } = data
  let light = new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)
  light.position.set(0, 50, 0)
  scene.add(light)
  let helper = new THREE.SpotLightHelper(light, color1)
  scene.add(helper)

  function refresh () {
    scene.remove(light)
    scene.remove(helper)
    const { color, intensity, distance, angle, penumbra, decay, color1 } = data
    light = new THREE.SpotLight(color, intensity, distance, angle, penumbra, decay)
    light.position.set(0, 50, 0)
    scene.add(light)
    helper = new THREE.SpotLightHelper(light, color1)
    scene.add(helper)
  }

  const folder = gui.addFolder('点光源')
  folder.addColor(data, 'color').onChange(refresh)
  folder.add(data, 'intensity', 0, 5).onChange(refresh)
  folder.add(data, 'distance', 0, 200).onChange(refresh)
  folder.add(data, 'angle', 0, Math.PI * 2).onChange(refresh)
  folder.add(data, 'penumbra', 0, 5).onChange(refresh)
  folder.add(data, 'decay', 0, 5).onChange(refresh)

  const folder1 = gui.addFolder('辅助网格')
  folder1.addColor(data, 'color1').onChange(refresh)
}

const data = {
  color: 0xffffbb,
  intensity: 1,
  distance: 50,
  angle: Math.PI / 4,
  penumbra: 1,
  decay: 1,
  sphereSize: 100,
  color1: 0xff0000
}

export {
  createSpotLightHelper
}
